<template>
	<view class="s_container">
		<view class="s_header">
			<image class="mh_img" src="../../../static/images/background.png"></image>
		</view>
		<view class="user_box">
			<view class="user_msg">
				<view class="mb_img" v-if="!loginFlag">
					<image src="../../../static/images/avator.png" class="m_img"></image>
				</view>
				<view class="mb_img" v-if="loginFlag">
					<image v-if="imagePath != ''" :src="`${imageUrl}${imagePath}`" class="m_img"></image>
					<image v-else src="../../../static/images/avator.png" class="m_img"></image>
				</view>
				<view class="s_txt_box">
					<text class="st_login">{{loginFlag ? String(mobileNo).replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") : '未登录，请点击登录'}}</text>
				</view>
			</view>
			<view class="user_msg">
				<view class="s_txt_box">
					<text>余额（元）</text>
					<text class="amount_txt">{{allAmount}}</text>
				</view>
			</view>
		</view>
		<view class="menus">
			<view class="menus_box" v-for="(menus, index) in menuList" :key="index">
				<view class="menu_item" v-for="(menu, i) in menus.menus" :key="i" @click="jumpSwitch(menu.path)">
					<view class="avatoa">
						<image :src="menu.btnImg" class="imgava"></image>
						<text class="menu_title">{{menu.btnName}}</text>
					</view>
					<text class="menu_title arrow_icon">〉</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		imgURL,
		requestURL
	} from '../../../common/utils/config.js';
	import {
		findUserByUserId
	} from '../../../common/api/index.js';
	import {regFenToYuan} from '../../../common/js/utils.js';
	export default {
		onShow: function() {
			this.loginFlag = uni.getStorageSync('s_login')
			if (this.loginFlag) {
				this._getUserInfo()
				this._queryBalance()
			}
		},
		data() {
			return {
				imagePath: '',
				loginFlag: false,
				mobileNo: '',
				allAmount: 0,
				imgUrls: `${imgURL}/mini_image_file/`,
				imageUrl: `${requestURL}/ecm/api/app/pic/`,
				menuList: [{
					order: 1,
					menus: [{
							btnName: '充值',
							btnImg: '../../../static/images/recharge.png',
							path: './rechargeAmount'
						},
						{
							btnName: '提现',
							btnImg: '../../../static/images/withdraw.png',
							path: './withdraw'
						}
					]
				}, {
					order: 2,
					menus: [{
						btnName: '转账',
						btnImg: '../../../static/images/transfer.png',
						path: './transfer'
					}]
				}]
			}
		},
		methods: {
			_queryBalance() {
				let bizUserId = uni.getStorageSync('bizUserId')
				uni.showLoading()
				uni.request({
					method: 'POST',
					url: 'https://qiancheng.mynatapp.cc/common/biz/cloud/order/queryBalance',
					data: {
						bizUserId: bizUserId,
						accountSetNo: '400193'
					},
					header: { 'content-type': 'application/json' },
					success: (res) => {
						if(res.data.code == 10000) {
							this.allAmount = regFenToYuan(res.data.data.allAmount)
							uni.hideLoading()
						} else {
							uni.hideLoading()
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err)
					}
				})
			},
			_getUserInfo() {
				let s_userId = uni.getStorageSync('s_userId')
				findUserByUserId({
					userId: s_userId
				}).then(res => {
					if (res.resultCode == 0) {
						this.mobileNo = res.obj.mobileNo
						this.imagePath = res.obj.imagePath
					} else {
					}
				}).catch(err => {
					console.log(err)
				})
			},
			jumpSwitch(path) {
				if (path === undefined) {
					uni.showModal({
						title: '提示',
						content: '敬请期待~',
						confirmColor: "#007AFF",
						showCancel: false
					});
				} else {
					if(path == '') {
						uni.navigateTo({
							url: './withdraw?allAmount=' + this.allAmount
						})
					} else {
						uni.navigateTo({
							url: path
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.s_container {
		height: 100vh;
		background-color: rgb(243, 243, 243);
		overflow: hidden;
	}

	.mb_img {
		margin-right: 10rpx;
		text-align: center;
	}

	.m_img {
		height: 100rpx;
		width: 100rpx;
		border-radius: 10rpx;
	}

	.s_header {
		width: 100%;
		height: 220rpx;
		background-color: #195ED7;
	}

	.mh_img {
		width: 100%;
		height: 100%;
	}

	.menus {
		margin: 80rpx 0 0 0;
	}

	.menus_box {
		display: flex;
		flex-direction: column;
		box-shadow: 0px 2px 8px 0px #ededed;
		margin-bottom: 20rpx;
	}

	.menu_item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		background-color: #FFFFFF;
		&:active{
			background-color: #f6f6f6;
		}
	}


	.avatoa {
		display: flex;
		align-items: center;
	}

	.imgava {
		width: 56rpx;
		height: 56rpx;
		margin-right: 25rpx;
	}

	.menu_title {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 34rpx;
		color: #000000;
	}

	.user_box {
		width: calc(100vw - 48rpx);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 48rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		// box-shadow: 0px 2px 8px 0px #ededed;
		background-color: #FFFFFF;
		position: absolute;
		top: 80rpx;
		margin: 0 24rpx;
	}

	.arrow_icon {
		color: #333;
	}

	.s_txt_box {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		color: #666;

		.amount_txt {
			padding: 12rpx;
			color: #195ED7;
			font-size: 50rpx;
			font-weight: bolder;
		}
	}

	.st_login {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999;
	}
</style>
